<template>
    <div>

      <el-button size="medium" type="text" icon="el-icon-circle-plus-outline" @click="addPlanClick" v-if="!disbale && checkAdd() && (datas.status > 0 && datas.status < 6 && datas.status != 2)">
        创建工作计划
      </el-button>

      <el-table
        @row-click="tableRowClick"
        size="medium"
        :data="tableData"
        border
        align="center"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="work_content"
          label="工作内容">
        </el-table-column>
        <el-table-column
          align="center"
          prop="executor"
          label="执行人">
        </el-table-column>
        <el-table-column
          label="创建人"
          align="center"
          prop="creator_name"
          width="80" />
        <el-table-column
          align="center"
          label="开始时间">
          <template slot-scope="scope">
            {{scope.row.plan_start_time ? dateFormat1('yyyy-mm-dd',scope.row.plan_start_time) : ''}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="结束时间">
          <template slot-scope="scope">
            {{scope.row.plan_end_time ? dateFormat1('yyyy-mm-dd',scope.row.plan_end_time) : ''}}
          </template>
        </el-table-column>
        <el-table-column label="实际开始时间" align="center" prop="reality_start_time" width="160">
          <template slot-scope="scope">
            {{scope.row.reality_start_time ? dateFormat1('yyyy-mm-dd HH:MM:SS',scope.row.reality_start_time) : ''}}
          </template>
        </el-table-column>
        <el-table-column label="实际结束时间" align="center" prop="reality_end_time" width="160">
          <template slot-scope="scope">
            {{scope.row.reality_end_time ? dateFormat1('yyyy-mm-dd HH:MM:SS',scope.row.reality_end_time) : ''}}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">未开始</span>
            <span v-else-if="scope.row.status == 2">进行中</span>
            <span v-else-if="scope.row.status == 3">已结束</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="!disbale"
          align="left"
          header-align="center"
          prop="name"
          label="操作"
        >
          <template slot-scope="scope">

            <div style="display: flex;flex-wrap: wrap;width: 100%">
              <div style="margin-right: 10px">
                <el-button size="medium" type="text" v-if="scope.row.status == 1 && checkCreator(scope.row.executor_id)" @click="changeStatus(scope.row.id,2)">
                  开始
                </el-button>
              </div>
              <div style="margin-right: 10px">
                <el-button class="text-btn-red" size="medium" type="text" v-if="scope.row.status == 1 && checkCreator(scope.row.creator_id)" @click="deleteClick(scope.row.id)">
                  删除
                </el-button>
              </div>
              <div>
                <el-button size="medium" type="text" v-if="scope.row.status == 2 && checkCreator(scope.row.executor_id)" @click="detailClick(scope.row.id)">
                  结束
                </el-button>
              </div>
            </div>
<!--            <el-button size="medium" type="text" @click="detailClick(scope.row.id)">-->
<!--              详情-->
<!--            </el-button>-->

          </template>

        </el-table-column>
      </el-table>

      <el-dialog
        v-if="dialogVisible"
        title="创建工作计划"
        :visible.sync="dialogVisible"
        width="700px"
        :before-close="handleClose">

        <add-plan-view ref="addPlan" :data="planData" :members="members"></add-plan-view>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmClick">确 定</el-button>
        </span>
      </el-dialog>

      <el-dialog
        title="工作计划详情"
        :visible.sync="detailVisible"
        width="700px"
        :before-close="detailClose">

        <work-plan-detail-view :data="planDetail" :changes="changeData" ></work-plan-detail-view>

        <span slot="footer" class="dialog-footer">
          <el-button v-if="planDetail.status == 1 && checkCreator(planDetail.creator_id)" @click="deleteClick(planDetail.id)">删 除</el-button>
          <el-button type="primary" v-if="planDetail.status == 1 && checkCreator(planDetail.executor_id)" @click="changeStatus(planDetail.id,2)">开 始</el-button>
          <el-button type="primary" v-if="planDetail.status == 2 && checkCreator(planDetail.executor_id)" @click="closeConfirm">结 束</el-button>
        </span>
      </el-dialog>

    </div>
</template>

<script>
  import workPlanDetailView from "./workPlanDetailView";
  import addPlanView from "./addPlanView";

    export default {
        name: "planView",
        components:{addPlanView,workPlanDetailView},
        props:{
            datas:{
                type:Object,
                default:function () {
                    return{

                    }
                }
            },
            projectId:String,
            projectName:String,
            disbale:{
                type:Boolean,
                default:function () {
                    return false
                }
            }
        },
        data:function () {
            return{
                tableData:[],
                pageSize:100,
                pageNum:1,
                dialogVisible:false,
                planData:{},

                planDetail:{},
                detailVisible:false,

                closeVisible:false,

                num:0,

                planId:'',

                changeData:{
                    task_progress:0,
                },
                members:[]
            }
        },
        mounted() {

        },
        methods:{
            checkAdd:function(){
                if (this.datas.person_in_charge && this.$store.getters.userInfo.user.id == this.datas.person_in_charge.member_id){
                    return true
                }else if (this.datas.task_member_id && this.datas.task_member_id.length){
                    if (this.datas.task_member_id.findIndex(a=>a==this.$store.getters.userInfo.user.id) != -1){
                        return true
                    }
                }
                return false
            },
            checkCreator:function(id){
                if (this.$store.getters.userInfo.user.id == id){
                    return true
                }
                return false
            },
            getListData:function () {
                let data = {
                    project_id:this.projectId,
                    task_id:this.datas.id,
                    pager:{
                        limit:this.pageSize,
                        skip:this.pageNum,
                        OrderBy:'',
                        OrderMethod:-1
                    }
                }
                this.$api.PROJECT_WORK_PLAN_LIST(data).then(res=>{
                    if (res.code == 200){
                        this.tableData = res.data.data;
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            handleClose:function(){
                this.dialogVisible = false;
            },
            handleClose1:function(){
                this.closeVisible = false;
            },
            confirmClick:function () {
                if (this.$refs.addPlan){
                    this.$refs.addPlan.formValidate().then(val=>{
                        if (val){
                            this.planData.plan_start_time = this.dealDateStr(new Date(this.planData.startTime)) + " 00:00:00"
                            this.planData.plan_end_time = this.dealDateStr(new Date(this.planData.endTime)) + " 23:59:59"
                            this.$api.PROJECT_WORK_PLAN_CREATE(this.planData).then(res=>{
                                if (res.code == 200){
                                    this.getListData();
                                }else {
                                    this.$message.error(res.msg)
                                }
                            }).catch(err=>{

                            })

                            this.dialogVisible = false;
                        }
                    })
                }

            },
            dealDateStr:function(date){
                let year = date.getFullYear();
                let month = date.getMonth() + 1;
                let day = date.getDate();
                if (month < 10){
                    month = "0" + month
                }
                if (day < 10){
                    day = "0" + day;
                }

                return year + "-" + month + "-" + day
            },
            addPlanClick:function () {
                this.planData = {
                    work_content:'',
                    project_id:this.projectId,
                    project_message:this.datas.project_name,
                    task_id:this.datas.id,
                    task_message:this.datas.task_name,
                    executor_id:'',
                    executor:'',
                    plan_start_time:'',
                    plan_end_time:'',
                    delivery_files:[],
                }

                if (this.$store.getters.userInfo.user.id == this.datas.person_in_charge.member_id){
                    this.members = this.datas.task_member;
                }else {
                    let index = this.datas.task_member.findIndex(a=>a.member_id == this.$store.getters.userInfo.user.id)
                    if (index != -1){
                        this.planData.executor_id = this.$store.getters.userInfo.user.id;
                        this.planData.executor = this.$store.getters.userInfo.user.user_name,
                        this.members = [this.datas.task_member[index]]
                    }else {
                        this.members = []
                    }
                }
                if (this.members.length && this.members.length == 1){
                    this.planData.executor_id = this.members[0].member_id
                    this.planData.executor = this.members[0].member_name
                }

                this.dialogVisible = true;
            },
            deleteClick:function (id) {

                this.$confirm('此操作将永久删除该计划, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.detailVisible = false;
                    this.$api.PROJECT_WORK_PLAN_DELETE(id).then(res=>{
                        if (res.code == 200){
                            this.getListData();
                        }else {
                            this.$message.error(res.msg)
                        }
                    }).catch(err=>{

                    })

                }).catch(() => {

                });

            },
            changeStatus:function (id,status) {
                this.detailVisible = false;
                this.$api.PROJECT_WORK_PLAN_STATUS(id,status,{}).then(res=>{
                    if (res.code == 200){
                        this.getListData();
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })

            },
            tableRowClick:function(row, column, event){
                if (column.label != '操作'){
                    this.getWorkPlan(row.id);
                }
            },
            detailClick:function(id){
                this.getWorkPlan(id);
            },
            getWorkPlan:function (id) {
                this.$api.PROJECT_WORK_PLAN_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.planDetail = res.data;
                        this.detailVisible = true;
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            detailClose:function () {
                this.detailVisible = false;
            },
            closeConfirm:function () {
                this.detailVisible = false;

                this.$api.PROJECT_WORK_PLAN_STATUS(this.planDetail.id,3,this.changeData).then(res=>{
                    this.changeData.task_progress = 0;
                    if (res.code == 200){
                        this.getListData();
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            closeClick:function (id) {
                this.planId = id;

                this.$api.PROJECT_WORK_PLAN_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.planDetail = res.data;
                        this.closeVisible = true;
                    }else {
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            }
        }
    }
</script>

<style scoped>

</style>
